<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps({
  size: {
    type: [String, Number],
    default: () => 42
  },
  circle: {
    type: Boolean,
    default: () => true
  },
  link: {
    type: String,
    default: () => ''
  },
  hoverText: {
    type: String,
    default: () => ''
  }
})

let hasShow = ref(false)

function onIconClick() {
  setTimeout(() => {
    if (props.link) {
      window.open(props.link, '_target')
    }
  }, 100)
}
function onEnter() {
  hasShow.value = true
}
function onLeave() {
  hasShow.value = false
}

const sizeAndPx = computed(() => {
  return props.size + 'px'
})
</script>

<template>
  <div class="icon-button-wrapper" @mouseenter="onEnter" @mouseleave="onLeave">
    <a
      class="icon-button hvr-radial-out"
      :style="{
        width: sizeAndPx,
        height: sizeAndPx,
        borderRadius: props.circle ? '50%' : '5px'
      }"
      @click="onIconClick"
    >
      <slot />
    </a>
    <div v-if="props.hoverText !== ''">
      <div class="tips-box" v-show="hasShow">
        {{ props.hoverText }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.icon-button-wrapper {
  position: relative;
  .icon-button {
    box-shadow: 0 0 5px 0 var(--shadow-color);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
    position: relative;

    &:hover {
      box-shadow: 0 0 5px 0 var(--shadow-color);
    }
    &:active {
      box-shadow: 0 0 5px inset var(--shadow-color);
      transform: translateY(2px);
    }
  }
  .tips-box {
    position: absolute;
    width: calc(100% * 1.5);
    left: -25%;
    top: v-bind(sizeAndPx);
    padding: 2px 8px;
    margin-top: 12px;
    background: #212121;
    border: 1px solid #252525;
    color: #eee;
    border-radius: 5px; 
    word-break: break-all;
    cursor: default;
    pointer-events: none;
    font-size: 12px;
    text-align: center;

    &::after {
      --size: 7px;
      content: '';
      position: absolute;
      left: calc(50% - var(--size));
      top: -13px;
      width: var(--size);
      height: var(--size);
      border: var(--size) solid transparent;
      border-bottom-color: #212121;
    }
  }
}
</style>
